<template>
<el-drawer :title="drawer.title" append-to-body :visible.sync="drawer.visible" direction="rtl" custom-class="drawer-right-side" size="70%" :withHeader="false">
    <div class="page-customer">
        <div class="page-header">
            <div class="customer-header">
                <div class="left">
                    <div class="avatar-group">
                        <div @click="showEditBaseView" style="cursor: pointer;">
                            <el-avatar class="avatar-left" shape="square" :size="50" icon="el-icon-edit"></el-avatar>
                        </div>
                        <div class="avatar-right">
                            <div class="fullname">
                                <span class="name">
                                    {{ customer.fullname ? customer.fullname : "未知" }}
                                </span>
                                <el-link class="tag-item" v-if="!isFavorite" type="primary" @click="doFav(2, 1)"><i class="el-icon-star-off"></i>点击收藏</el-link>
                                <el-link class="tag-item" v-else type="warning" @click="doFav(2, 0)"><i class="el-icon-star-off"></i>已收藏</el-link>
                            </div>
                            <div class="tags">
                                {{ allocate.user.realname }}
                                <el-tag type="danger" v-if="customer.creator.status == 0">已离职</el-tag>，于{{
                                        allocate.create_time }}，{{ allocate.assign_type }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="right">
                    <el-button-group>
                        <el-dropdown trigger="click" @command="handleLevel">
                            <el-button type="primary">
                                重要程度
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="A">A</el-dropdown-item>
                                <el-dropdown-item command="B">B</el-dropdown-item>
                                <el-dropdown-item command="C">C</el-dropdown-item>
                                <el-dropdown-item command="D">D</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <el-button type="primary" @click="showCombineDialog"><i class="el-icon-paperclip"></i>
                            合并</el-button>
                        <el-dropdown trigger="click" @command="handleMore">
                            <el-button type="primary">
                                更多
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="editSource">修改渠道</el-dropdown-item>
                                <el-dropdown-item command="appendSource">添加重复渠道</el-dropdown-item>
                                <el-dropdown-item command="createOrder">申请成单</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <el-button type="primary" style="float: right" icon="el-icon-close" @click="closeDrawer"></el-button>
                    </el-button-group>
                </div>
            </div>
            <div class="customer-body">
                <customer-product :product="allocate.product"></customer-product>
                <contact-list :contactList="contacts" :customer="customer"></contact-list>
            </div>
        </div>

        <div class="tab-box">
            <el-button-group class="customer-pg">
                <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="toPrevious"></el-button>
                <el-button type="primary" size="mini" @click="toNext"><i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>

            <el-tabs v-model="activeName" @tab-click="changeTab">

                <el-tab-pane label="跟进记录" name="visit">
                    <div class="table-panel">
                        <brand-list :brandList="brands" :allocate="allocate" @refresh="getAllocateDetail"></brand-list>
                        <owner-list :ownerList="owners" :allocate="allocate" @refresh="getAllocateDetail"></owner-list>
                        <div class="visit-handle" v-show="!isShowInnerVisit">
                            <el-button type="text" @click="showInnerVisit" icon="el-icon-edit-outline">添加跟进记录</el-button>
                        </div>
                        <el-card class="visit-inner-box" v-if="isShowInnerVisit">
                            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="left">
                                <el-row class="form-item-row">
                                    <el-col :span="24">
                                        <picker-view v-model="ruleForm.brand_id" type="company" placeholder="请选择品牌"></picker-view>

                                        <el-select class="ml10" v-model="ruleForm.status" placeholder="请选择跟进状态" @change="changeStatus">
                                            <el-option v-for="(item, key) in statusList" :key="key" :label="item.title" :value="item.id"></el-option>
                                        </el-select>

                                        <el-select class="ml10" v-model="ruleForm.cause" placeholder="请选择原因" @change="changeFast">
                                            <el-option v-for="item in fastList" :key="item" :label="item" :value="item"></el-option>
                                        </el-select>

                                        <el-date-picker class="ml10" v-if="isShowNextVisit" type="datetime" v-model="ruleForm.next_visit_time" placeholder="请选择下次回访时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                                    </el-col>
                                </el-row>

                                <el-row class="form-item-row">
                                    <el-col :span="24">
                                        <el-input v-model="ruleForm.remark" type="textarea" placeholder="请填写跟进记录"></el-input>
                                    </el-col>
                                </el-row>

                                <el-row class="form-item-row" v-if="fileGroup.image.length > 0">
                                    <el-col :span="24" class="image-group">
                                        <div class="image-box" v-for="(item, key) in fileGroup.image" :key="key">
                                            <el-image :src="item.url" fit="contain" :preview-src-list="uploadImages"></el-image>

                                            <el-button class="remove" type="warning" size="mini" icon="el-icon-close" circle @click="handleRemove(item, 'image')"></el-button>
                                        </div>
                                    </el-col>
                                </el-row>

                                <el-row class="form-item-row" v-if="fileGroup.file.length > 0">
                                    <el-col :span="24">
                                        <el-table :data="fileGroup.file">
                                            <el-table-column label="文件" prop="name"></el-table-column>
                                            <el-table-column align="right">
                                                <template slot-scope="scope">
                                                    <el-link type="text" :href="scope.row.url" target="_blank" v-if="scope.row.ext == 'pdf'"><i class="el-icon-view"></i></el-link>
                                                    <el-link type="text" :href="scope.row.url" target="_blank" v-else><i class="el-icon-download"></i>
                                                    </el-link>
                                                    <el-button type="text" icon="el-icon-close" class="ml10" @click="handleRemove(scope.row, 'file')"></el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>

                                <el-row class="form-item-row">
                                    <el-col :span="12">
                                        <el-upload ref="uploadRef" :action="uploadAction" :headers="uploadHeader" :show-file-list="false" :file-list="fileList" list-type="picture" :on-success="uploadSuccess">
                                            <el-button size="small" type="text" icon="el-icon-link">附件</el-button>
                                        </el-upload>
                                    </el-col>
                                    <el-col :span="12" style="text-align: right;">
                                        <el-button size="mini" @click="cancel">取消</el-button>
                                        <el-button type="primary" size="mini" @click="doVisit">发布</el-button>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-card>
                        <!-- <visit-inner ref="visitInnerRef" @reload="getAllocateDetail" @hideInnerVisit="hideInnerVisit"></visit-inner> -->
                        <visit-list :visitList="visits"></visit-list>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="进店" name="invite">
                    <invite-list ref="inviteListRef" :allocate="allocate" :customer="customer"></invite-list>
                </el-tab-pane>

                <el-tab-pane label="订单" name="order">
                    <order-list ref="orderListRef"></order-list>
                </el-tab-pane>

                <el-tab-pane label="签到" name="sign">
                    <sign-list ref="signListRef" :allocate="allocate"></sign-list>
                </el-tab-pane>

                <el-tab-pane label="操作记录" name="logs">
                    <source-list :sourceList="sources"></source-list>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <customer-edit ref="editBaseView"></customer-edit>
    <source-append ref="sourceAppendView"></source-append>
    <visit-append ref="appendVisit" @refreshVisit="getVisitGroup"></visit-append>
    <customer-combine ref="combineDialogRef" @refreshMember="getAllocateDetail"></customer-combine>
    <share-view ref="shareView" @submit="doShare"></share-view>
    <contact-list-dialog ref="contactListDialogRef"></contact-list-dialog>

    <create-order ref="orderCreateRef"></create-order>
</el-drawer>
</template>

<script>
import {
    getAllocateDetailApi,
    doFavApi,
    doLeveldApi,
    allocateHandleApi,
    doSignApi,
} from "@/api/customer/member.js";
import {
    getVisitGroupApi
} from "@/api/customer/visit.js";

import contactList from "@/views/customer/task/components/contact-list";
import contactListDialog from "./components/contact-list-dialog.vue";
import customerEdit from "@/views/customer/task/components/customer-edit";
// 客资基本信息
import customerProduct from "@/views/customer/task/components/customer-product";

// 订单
import orderList from "@/views/customer/task/components/order-list.vue";

import sourceAppend from "@/views/customer/task/components/source-append";
import sourceList from "@/views/customer/task/components/source-list";

// 回访
import ownerList from "./components/customer-owner-list.vue";
import visitAppend from "./components/visit-append.vue";
import visitInner from "./components/visit-inner.vue";
import visitList from "@/views/customer/task/components/visit-list";
import shareView from "@/components/picker/share.vue";

import customerCombine from "@/views/customer/task/components/customer-combine";
import createOrder from '@/views/order/create/index.vue';

// 邀约
import inviteList from "@/views/customer/task/components/invite-list.vue";

// 签到
import signList from "@/views/customer/task/components/sign-list.vue";

// 品牌
import brandList from "@/views/customer/task/components/customer-brands.vue";
import {
    getToken
} from '@/utils/auth'

import {
    createVisitApi
} from '@/api/customer/visit.js'
import {
    getPickerApi
} from '@/api/system/dictionary/status.js'
import uploadFiles from '@/components/upload/files.vue'
import pickerView from '@/components/picker/select.vue'
//回访
const ruleForm = {
    member_id: '',
    status: '',
    invalid: '',
    next_visit_time: '',
    files: [],
    remark: '',
    cause: ''
}
export default {
    props: {
        parent: {
            type: Object,
            default: function () {
                return {};
            },
        },
    },
    provide() {
        return {
            customerDetail: this,
        };
    },
    components: {
        contactList,
        contactListDialog,
        customerEdit,
        sourceAppend,
        customerProduct,
        sourceList,
        ownerList,
        visitAppend,
        visitInner,
        shareView,
        brandList,
        visitList,
        inviteList,
        orderList,
        signList,
        customerCombine,
        createOrder,
        //回访
        uploadFiles,
        pickerView
    },
    data() {
        return {
            id: "",
            drawer: {
                title: "客资详情",
                visible: false,
            },
            visible: false,
            //回访S
            fileList: [],
            fileGroup: {
                image: [],
                file: []
            },
            statusList: [],
            fastList: [],
            ruleForm: Object.assign({}, ruleForm),
            rules: {
                status: [{
                    required: true,
                    message: '请选择跟进状态',
                    trigger: 'change'
                }],
                remark: [{
                    required: true,
                    message: '请填写备注',
                    trigger: 'blur'
                }]
            },

            allocate: {
                id: "",
                user: {
                    id: "",
                    realname: "",
                    status: "",
                },
                from_user: {
                    id: "",
                    realname: "",
                    status: "",
                },
                visit_status: {
                    id: "",
                    title: "",
                },
                assign_type: "",
                sign_time: "",
                product: {
                    id: "",
                    store: {
                        id: "",
                        title: "",
                    },
                    budget: "",
                    event_date: "",
                    event_month:""
                },
            },
            activeName: "visit",
            customer: {
                id: "",
                source_id: "",
                source: {
                    id: "",
                    title: "",
                },
                creator: {
                    id: "",
                    realname: "",
                },
                category: {
                    id: "",
                    title: "",
                },
                visit_status: {
                    id: "",
                    title: "",
                },
                remark: "",
            },
            favorites: [], // 收藏信息
            contacts: [], // 联系方式
            visits: [], // 回访历史
            owners: [], // 跟踪者
            sources: [], // 重复渠道
            nextType: "",
            isShowInnerVisit: false,
            parentList: [],
            brands: [],
        };
    },
    computed: {
        isShowNextVisit() {
            let target = this.statusList.find(ele => ele.id == this.ruleForm.status)
            if (!target) return false

            return target.need_next_visit == 1 ? true : false
        },
        invalidList() {
            let localData = localStorage.getItem('invalidPickerList')
            if (localData) {
                return JSON.parse(localData)
            } else {
                return []
            }
        },
        uploadImages() {
            return this.fileGroup.image.map(item => item.url)
        },
        uploadAction: function () {
            return process.env.VUE_APP_BASE_API + '/api/system.file/upload'
        },
        uploadHeader: function () {
            let header = {}
            header['X-Token'] = getToken()
            return header
        },
        defaultContact() {
            if (this.contacts.length > 0) {
                return this.contacts[0];
            } else {
                return {
                    tag: "联系电话",
                    contact: "暂无",
                };
            }
        },
        // 是否重要客户
        isImportent() {
            let target = this.favorites.find((ele) => ele.type == 1);
            if (target) {
                return true;
            } else {
                return false;
            }
        },
        // 是否收藏
        isFavorite() {
            let target = this.favorites.find((ele) => ele.type == 2);
            if (target) {
                return true;
            } else {
                return false;
            }
        },
    },
    methods: {
        //回访
        getStatusPicker() {
            getPickerApi({}).then(res => {
                this.statusList = res.data.list
            })
        },
        cancel() {
            this.isShowInnerVisit = false;
        },
        changeStatus(e) {
            let target = this.statusList.find(ele => ele.id == this.ruleForm.status)
            this.fastList = target.fast
        },
        changeFast(ele) {
            this.ruleForm.remark += ele
        },
        uploadSuccess(res, file) {
            // 获取文件类型;
            // 根据file规则构建新的对象

            const newFile = {
                ext: res.data.extname,
                name: file.name,
                url: res.data.path
                // 其他属性根据需要添加
            }
            // 将新的文件对象添加到fileList中
            this.fileList.push(newFile)
            // 判断是否是图片类型, 则添加到fileGroup中的image数组中
            let imageTypes = ['png', 'jpg', 'jpeg', 'gif']
            if (imageTypes.includes(newFile.ext.toLowerCase())) {
                this.fileGroup.image.push(newFile)
            } else {
                // 如果是文件类型, 则添加到fileGroup中的file数组中
                this.fileGroup.file.push(newFile)
            }
        },
        handleRemove(file, type) {
            // 提醒确认删除
            this.$confirm('删除文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    // 处理移除逻辑...
                    const index = this.fileList.findIndex(item => item.url === file.url)
                    if (index !== -1) {
                        // 删除文件
                        this.fileList.splice(index, 1)
                    }

                    if (type == 'image') {
                        const index = this.fileGroup.image.findIndex(item => item.url === file.url)
                        if (index !== -1) {
                            // 删除文件
                            this.fileGroup.image.splice(index, 1)
                        }
                    } else {
                        // 如果是文件类型, 则添加到fileGroup中的file数组中
                        const index = this.fileGroup.file.findIndex(item => item.url === file.url)
                        if (index !== -1) {
                            // 删除文件
                            this.fileGroup.file.splice(index, 1)
                        }
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        //回访
        showDrawer(row) {
            this.drawer.visible = true;
            this.activeName = "visit";
            (this.id = row.id), this.getAllocateDetail();
            console.log(this.isShowInnerVisit)
        },
        getAllocateDetail() {
            this.hideInnerVisit();
            getAllocateDetailApi({
                    id: this.id,
                })
                .then((res) => {
                    if (res.code != "200") {
                        this.$message.error(res.msg);
                        return;
                    }
                    this.allocate = res.data.allocate;
                    // 客资详情
                    this.customer = res.data.customer;
                    // 联系电话
                    this.contacts = res.data.contacts;
                    // 渠道
                    this.sources = res.data.sources;
                    // 跟进人
                    this.owners = res.data.owners;
                    // 品牌
                    this.brands = res.data.brands;

                    this.changeTab();
                })
                .catch((res) => {
                    this.$message.error("页面异常，按f5刷新重试");
                });
        },
        closeDrawer() {
            this.drawer.visible = false;
            this.isShowInnerVisit = false;
        },
        toPrevious() {
            const pageIndex = this.$parent;
            let index = pageIndex.tableData.findIndex(
                (e) => e.id == this.allocate.id
            );

            if (index == -1) {
                index = pageIndex.tableData.length;
            }

            if (index == 0) {
                if (pageIndex.pg.page == 1) {
                    this.$message.error("已经是第一页，第一个了");
                    return false;
                } else {
                    this.nextType = "last";
                    pageIndex.pg.page = pageIndex.pg.page - 1;
                    this.parent.getTableData().then(() => {
                        this.showPageLast();
                    });
                }
            } else {
                let target = pageIndex.tableData[index - 1];
                this.id = target.id;
                this.getAllocateDetail();
            }
        },
        toNext() {
            let pageIndex = this.parent;
            let index = pageIndex.tableData.findIndex(
                (e) => e.id == this.allocate.id
            );

            if (index == pageIndex.tableData.length - 1) {
                let totalPage = Math.ceil(pageIndex.pg.total / pageIndex.pg.limit);
                if (totalPage == pageIndex.pg.page) {
                    this.$message.error("已经是最后一页的最后一个了");
                    return false;
                } else {
                    // this.nextType = "next";
                    pageIndex.pg.page = pageIndex.pg.page + 1;
                    this.parent.getTableData().then(() => {
                        this.showPageFirst();
                    });
                }
            } else {
                let target = pageIndex.tableData[index + 1];
                this.id = target.id;
                this.getAllocateDetail();
            }
        },
        showPageFirst() {
            let target = this.parent.tableData[0];
            this.id = target.id;
            this.getAllocateDetail();
        },
        showPageLast() {
            let target = this.parent.tableData[this.parent.tableData.length - 1];
            this.id = target.id;
            this.getAllocateDetail();
        },
        // 合并客资
        showCombineDialog() {
            this.$refs["combineDialogRef"].showDialog(
                this.products,
                this.customer.id
            );
        },
        // 基本信息
        showEditBaseView() {
            this.$refs["editBaseView"].showDialog(this.customer);
        },
        // 显示更多项
        handleMore(e) {
            switch (e) {
                case "editSource":
                    this.$refs["sourceAppendView"].showDialog(this.customer.id, "edit");
                    break;
                case "appendSource":
                    this.$refs["sourceAppendView"].showDialog(this.customer.id, "append");
                    break;

                case "createOrder":
                    this.$refs['orderCreateRef'].showDrawer(this.customer.id, this.allocate.id, this.customer.source_id);
                    break;
            }
        },
        // 添加回访
        showAppendVisit() {
            this.$refs["appendVisit"].showDrawer(this.customer.id);
        },
        showInnerVisit() {
            this.isShowInnerVisit = true;
            // this.$refs["visitInnerRef"].showDrawer(this.customer.id);
            this.ruleForm = Object.assign({}, ruleForm);
            console.log(this.customer.id)
            this.ruleForm.member_id = this.customer.id;
            this.ruleForm.files = [];
            this.fileList = [];
            this.fileGroup = {
                image: [],
                file: []
            }
            this.$nextTick(() => {
                if (this.$refs['uploadRef']) {
                         this.$refs['uploadRef'].clearFiles();
                    } 
            })
            this.getStatusPicker()
        },
        doVisit() {
            let _this = this
            this.ruleForm.files = this.fileList
            this.ruleForm.member_id = this.customer.id;

            let target = this.statusList.find(ele => ele.id == this.ruleForm.status)
            if (target.need_next_visit == 1 && !this.ruleForm.next_visit_time && this.ruleForm.status != 10) {
                this.$message.warning('请选择下次回访时间')
                return false
            }

            this.$refs['ruleForm'].validate((valid) => {
                if (!valid) {
                    return false
                }
                let data = Object.assign({}, _this.ruleForm)

                // 添加客资
                createVisitApi(data).then((res) => {
                    if (res.code == '200') {
                        _this.$message.success(res.msg)
                        // if (this.pageIndex) _this.pageIndex.getTableData()
                        _this.isShowInnerVisit = false
                        _this.getVisitGroup();
                        _this.parent.getTableData()
                    } else {
                        _this.$message.warning(res.msg)
                    }
                })
            })

        },
        hideInnerVisit() {
            this.isShowInnerVisit = false;
            this.ruleForm = {
                id: "",
                member_id: "",
                status: "",
                remark: "",
                fast: "",
                image: [],
                file: [],
            };
            this.fileGroup = {
                image: [],
                file: []
            }
            this.$nextTick(() => {
                if (this.$refs['uploadRef']) {
                         this.$refs['uploadRef'].clearFiles();
                    } 
                // this.$refs['uploadRef'].clearFiles()
            })
        },
        // 收藏
        doFav(type, status) {
            let data = {
                member_id: this.customer.id,
                type: type,
                status: status,
            };
            doFavApi(data).then((res) => {
                if (res.code != 200) {
                    this.$message.error(res.msg);
                    return;
                }
                this.$message.success(res.msg);
                this.favorites = res.data.favorites;
            });
        },
        handleLevel(e) {
            let params = {};
            params["id"] = this.allocate.id;
            params["level"] = e;

            doLeveldApi(params).then((res) => {
                if (res.code == 200) {
                    this.getAllocateDetail(this.allocate.id);
                    this.$message.success(res.msg);
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        doSign() {
            // 签到
            doSignApi({
                id: this.allocate.id,
                member_id: this.customer.id,
            }).then((res) => {
                if (res.code == 200) {
                    this.allocate.sign_time = 100;
                    this.getVisitGroup();
                    this.$message.success(res.msg);
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        showShareView() {
            this.$refs["shareView"].showDialog();
            // this.$refs["shareStoreView"].showDialog();
        },
        doShare(userIds) {
            let options = {};
            options["allocateIds"] = [this.allocate.id];
            options["ids"] = userIds;

            allocateHandleApi(options).then((res) => {
                if (res.code == 200) {
                    this.$message.success(res.msg);
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        showContacts() {
            this.$refs["contactListDialogRef"].showDialog(this.contacts);
        },
        changeTab() {
            switch (this.activeName) {
                case "visit":
                    this.getVisitGroup();
                    break;

                    // 进店
                case "invite":
                    this.$nextTick(() => {
                        this.$refs["inviteListRef"].getInviteList();
                    });
                    break;

                case "order":
                    this.$nextTick(() => {
                        this.$refs["orderListRef"].getOrderList(this.customer.id);
                    });
                    break;

                case "sign":
                    this.$nextTick(() => {
                        this.$refs["signListRef"].fetchSignList();
                    });
                    break;
            }
        },
        getVisitGroup() {
            getVisitGroupApi({
                member_id: this.customer.id,
            }).then((res) => {
                // 拥有者
                this.owners = res.data.owners;
                // 回访历史
                this.visits = res.data.visits;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.page-customer {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;

    .page-header {
        flex: 0 auto;
        background: #f6f9fd;
        padding: 16px 20px;

        .customer-header {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ebeef5;
            padding-bottom: 16px;

            .left {
                flex: 1;
            }

            .right {
                flex: 1;
                text-align: right;

                .el-button-group {
                    .el-button {
                        margin-left: 8px;
                    }
                }
            }
        }

        .customer-body {
            width: 100%;
            display: grid;
            font-size: 14px;
            grid-template-columns: 1fr;
            // padding-top: 8px;

        }
    }

    .tab-box {
        flex: 1;
        padding: 12px 20px;
        position: relative;

        .customer-pg {
            position: absolute;
            top: 15px;
            right: 20px;
            z-index: 100;
        }

        .table-panel {
            height: calc(100vh - 262px);
            overflow-y: auto;

            .visit-handle {
                padding: 20px 0;
                border: 1px dashed #afb7c7;
                text-align: center;
                color: #afb7c7;
                cursor: pointer;
            }
        }
    }
}

.visit-inner-box {
    .form-item-row {
        margin-bottom: 12px;

        .image-group {
            // grid 布局，5列2行，第二行没有的时候不显示
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-gap: 10px;

            .image-box {
                height: 100px;
                border-radius: 4px;
                border: 1px solid #dedede;
                position: relative;

                .el-image {
                    width: 100%;
                    height: 100%;
                }

                .remove {
                    display: none;
                    position: absolute;
                    top: 10px;
                    right: 10px;
                }

                &:hover {
                    .remove {
                        display: block;
                    }
                }
            }

        }
    }

    .form-item-row:last-child {
        margin-bottom: 0;
    }

    .ml10 {
        margin-left: 10px;
    }
}
</style>
